<template>
	<view>
			<view class="page-foot" v-if="orderDetail.pay_status == 1"><view class="g-btn1" @click="payment()">立即支付</view></view>
		<view class="container pr">
			<image class="m-backdrop" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<view class="p30 pr">
				<view class="box ptb40 plr30 mb35 bg-white br20 flex flex-align-start">
					<image class="mr20" :src="orderDetail.course.thumb_image" mode="aspectFill" style="width: 168rpx;height: 168rpx;"></image>
					<view class="flex-1">
						<view class="m-ellipsis fs28 col-0 mb15">{{orderDetail.course.name}}</view>
						<view class="fs20 col-9" style="line-height: 30rpx;">{{orderDetail.course.description}}</view>
					</view>
				</view>
				<!-- <view class="box ptb40 plr30 mb35 bg-white br20 fs26 col-0">
					<view class="fs36 mb30">课程信息</view>
					<view class="mb40">课程名称：如何0成本快速倍增利润</view>
					<view class="mb40">课程时间：2019年4月25日 13:00-15:00</view>
					<view>课程地址：上海徐汇区石龙路569号s59园区2号楼</view>
				</view> -->
				<view class="box ptb40 plr30 mb35 bg-white br20">
					<view class="fs36 mb30">订单详情</view>
					<view class="mb40 flex-box fs28">
						<view class="col-9">下单时间</view>
						<view class="col-3 flex-1 tr">{{$formatDatetime(orderDetail.createtime,'yyyy-mm-dd hh:ii:ss')}}</view>
					</view>
					<view class="mb40 flex-box fs28" v-if="pay_status == 2">
						<view class="col-9">付款方式</view>
						<view class="col-3 flex-1 tr">微信支付</view>
					</view>
				</view>
				<view class="box ptb40 plr30 mb35 bg-white br20">
					<view class="fs36 mb30">订单金额</view>
					<view class="mb40 flex-box fs28">
						<view class="col-9">订单总额</view>
						<view class="col-3 flex-1 tr">¥{{orderDetail.total_price}}</view>
					</view>
					<view class="mb40 flex-box fs28">
						<view class="col-9">优惠券</view>
						<view class="col-3 flex-1 tr">－¥{{orderDetail.favourable_price}}</view>
					</view>
					<view class=" flex-box fs28">
						<view class="col-9">实际付款</view>
						<view class="col-3 flex-1 tr">¥{{orderDetail.pay_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id:0,
			orderDetail:{}
		};
	},
	onLoad(options){
		this.order_id = options.order_id || 0;
		this.fetchOrderDetail();
		uni.$on('orderPay',function(data){
			this.fetchOrderDetail();
		})
	},
	onUnload() {
		uni.$off('orderPay');
	},
	methods: {
		payment(){
			let orderDetail = this.orderDetail;
			if(orderDetail.pay_status == 1){
				uni.navigateTo({
					url: '/pages/pay/pay?type=course&order_id='+orderDetail.id+'&order_no='+orderDetail.order_no+'&pay_price='+orderDetail.pay_price
				})
			}
		},
		fetchOrderDetail(){
			this.$core.get({url:'xiluedu.course_order/detail',data:{order_id:this.order_id},success:(ret)=>{
				 this.orderDetail = ret.data;
			}});
		},
	}
};
</script>

<style scoped>
.container {
	background: rgb(247, 247, 247);
}
.box {
	box-shadow: 0 0 24rpx 0 rgba(0, 0, 0, 0.08);
}
.page-foot {
	padding: 30rpx;
	background-color: #fff;
}
</style>
